@font-face {
    font-family: Candara; 
    src: local("Candara"), 
         url(font/Candara.ttf); 
}

@font-face {
    font-family: Alexandra; 
    src: local("Alexandra Zeferino Three"), 
         url(font/Alexandra.ttf); 
}

@font-face {
    font-family: Myriad Pro; 
    src: local("Myriad Pro"), 
         url(font/MyriadPro-Regular.ttf); 
}

html{
	background-color: black;	
	overflow: hidden;
}

body{
	-webkit-transform: scale(1);
	-webkit-transform-origin: 0% 0%;
	margin: 0;
	/*width: 768px;
	height: 1024px;	*/
}

.scale{
	-webkit-transform-origin: 0% 0%;
	position: absolute;
	width: 768px;
	height: 1024px;	
}

.scaleX{
	-webkit-transform-origin: 0% 0%;
}

.bottom{
	position: absolute;
	width: 768px;
	height: 1024px;
}

.page{
	-webkit-transform-origin: 0% 0%;
	position: absolute;
	/*
	width: 768px;
	height: 1024px;
	*/
	width: 100%;
	height: 100%;
	display: none;
}

.page.active{
	display: block;
}

input.enter_player{
	/*float: left;*/
	width: 449px;
	border: none;
	padding: 8px 10px;
	background: url(../img/edit_name.png) no-repeat 0 0;
	font: bold 25px Candara;
}

.edit_settings{
	width: 130px;
	border: none;
	padding: 9px 0px;
	text-align: center;
	background: url(../img/edit_settings.png) no-repeat 0 0;
	font: bold 25px Candara;
	color: black;
}

.settings_name{
	width: 469px;
	height: 48px;
	padding: 6px 10px;
	background: url(../img/edit_name.png) no-repeat 0 0;
	font: bold 25px Candara;
	color: black;
}

.edit_settings.select{
	margin-top: -10px;
	background: url(../img/edit_settings_select.png) no-repeat 0 0;
}

input.enter_word{
	width: 570px;
	border: none;
	padding: 20px 10px;
	background: url(../img/edit_word.png) no-repeat 0 0;
	text-align: center;
	font: bold 46px Candara;
	
	-webkit-transition: -webkit-transform 0.3s linear;
	-webkit-transform-origin: 0px 0px;	
}

input:focus {
	outline: none;
}

.radio{
	float: left;
	margin-left: 26px;
	margin-top: 4px;
}
.radio-men{
	height: 46px;
	width: 51px;
	background: url(../img/radio_men.png) no-repeat 0 0;
}
.radio-women{
	height: 46px;
	width: 51px;
	background: url(../img/radio_women.png) no-repeat 0 0;
}

.radio-active{
	background-position: 0px -46px;
}

#player_name{
	font: bold 50px Candara;
	color: white;
	width: 500px;
}

.word{
	position: absolute; 
	top: 348px; 
	left: 157px;
	width: 449px;
	height: 220px;
	 
	-webkit-transform-origin: 50% 50%;
	-webkit-transition: -webkit-transform 0.4s ease;
	background: url(../img/word.png) no-repeat 0 0;
	text-align: center;
}

.word-text{
	position: relative; 
	top: 60px;
	color: #4D4D4D;
	font: 70px Alexandra;
}

#game_txt_time{
	color: #B6792A;
	font: 72px Alexandra;	
	width: 110px; 
	text-align: center;
}

.player_box{
	position: absolute; 
	width: 240px;
	height: 55px;
	border-radius: 10px;
	padding: 5px;
	background-color: rgba(100%, 0%, 0%, 0.5);
}

.team_index{
	float: left;
	width: 53px;
	height: 53px;
	border-radius: 5px;
	background-color: #ff0000;
	border-width:1px;
	border-style:solid;
	border-color:#fff;
	text-align: center;
	font: 44px Myriad Pro;
	margin-right: 5px;
	opacity: 0.3;
}

.team_index.active{
	opacity: 1;
}

.player_box span{
	float: left;
	font: 25px Arial;
	color: white;
	word-wrap: break-word;
	width: 170px;	
}

#boxCurPlayer{
	opacity: 1;
	-webkit-transition: opacity 1s linear;
}

#boxCurPlayer.active{
	opacity: 0;
}

.team{
	text-align: center;
	width: 140px;
	margin: 18px 0px;
}

.team div{
	width: 53px; 
	height: 53px; 
	border-radius: 5px; 
	background-color: #ff0000; 
	margin: 0px auto;
}

.team span{
	font: bold 25px Candara;
}

.button{
	-webkit-transform-origin: 50% 50%;
	-webkit-transition: -webkit-transform 0.2s ease;
	-webkit-transform: scale(1);
}

.button.active{
	-webkit-transform: scale(0.8);
}

.star{
	-webkit-transition: opacity 1s ease;
	opacity: 1;
}

.star.active{
	opacity: 0;
}

.light{
	-webkit-transition: opacity 1s ease;
	opacity: 1;
}

.light.active{
	opacity: 0;
}

.sound_slider{
    -webkit-appearance: none !important;
    background: url(../img/sound_slider.png) no-repeat 0 0;
    width: 478px;
	height: 28px;
}

.sound_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: url(../img/sound_slider_thumb.png) no-repeat 0 0;
    width: 66px;
	height: 57px;
	border: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;	
}

.page_title{
	position: absolute; 
	left: 61px; 
	top: 133px;
	background: url(../img/page_title.png) no-repeat 0 0;
    width: 661px;
	height: 136px;
	font: 85px Alexandra;
	text-align: center;
	padding-top: 10px;
}

.txt_title{
	font: bold 24px Candara;
	color: #603813;
}

.txt_words_info{
	width: 566px;
	color: #C69C6D;
	font: bold 30px Candara;
	text-align: center;
}

.bag{
	float: left;
	background: url(../img/bag_blue.png) no-repeat 0 0;
	width: 88px;
	height: 114px;
	text-align: center;
	font: bold italic 45px Calibri;
	line-height: 130px;
}

#circle_table{
	position: absolute; 
	left: 85px; 
	top: 790px;
	width: 96px;
	height: 96px;
	border-radius: 48px; 
	background-color: #B4B4B4;	
}

.circle_player{
	position: absolute; 
	width: 26px;
	height: 26px;
	border-radius: 13px; 
	background-color: #B4B4B4;
	opacity: 0.3;
}

.circle_player.active{
	opacity: 1;
}

.gameDialog{
	display: none;
	position: absolute;
	margin: 0px auto;
	background: url(../img/dialog_back.png) no-repeat 0 0;
	width: 673px;
	height: 670px;
	top: 140px;
	left: 50px;
}

.gameDialog.active{
	display: block;
}

#gameDialogBlock{
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
}

#dialog_title{
	position: absolute;
	font: 130px Alexandra;
	text-align: center;	
	width: 100%;
	color: white;
}

#dialog_text{
	position: absolute;
	left: 60px;
	top: 250px;
	font: bold italic 35px Calibri;	
	width: 540px;
	color: white;	
}

#results th{
	font: 18px Calibri;
	color: #534741;
}

#results td{
	height: 63px;
}

.playersResult{
	width: 100%;
	height: 47px;
	border-radius: 6px; 
	background-color: #976828;
	font: 18px Calibri;
	color: white;
	padding-top: 3px;
}

.playersResult div.name{
	margin-left: 12px; 
	width: 280px; 
	float: left;
}

.playersResult div.total{
	width: 58px; 
	float: left; 
	text-align: center;
}

.totalResult{
	width: 40px;
	height: 40px;
	border-radius: 6px;
	background-color: #D2A972;
	color: white;
	font: bold 24px Calibri;	
	line-height: 40px;
	border-width: 1px;
	border-style: solid;
	border-color: #B27136;	
}


.alertDialog{
	display: none;
	position: absolute;
	background: url(../img/ep_dialog_back.png) no-repeat 0 0;
	width: 600px;
	height: 300px;
	top: 300px;
	left: 83px;
}

.alertDialog.active{
	display: block;
}

#epDialogBlock{
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
}

.alertText{
	position: absolute;
	left: 50px;
	top: 50px;
	font: bold italic 35px Calibri;
	width: 500px;
	color: white;
	text-align: center;	
}

.sound_check{
	width: 78px;
	height: 48px;
	background: url(../img/sound.png) no-repeat 0 0;
}

.sound_check.active{
	background-position: 0px -48px;
}

.block{
	position: absolute;
}

.rule_box{
	width: 673px;
	height: 670px;
	background: url(../img/rule_box.png) no-repeat 0 0;
}

.rule_text{
	position: absolute; 
	left: 31px; 
	top: 43px;
	width: 600px;
	font: italic 18px Candara;
}
